<template>
    <div class="menuItem-content" v-if="menuData.length">
        <template v-for="item in menuData">
            <el-submenu v-if="item.children && item.children.length" :key="item.activeIndex" :index="item.activeIndex">
                <template slot="title">
                    <!-- <i :class="[menuActive.includes(item.activeIndex) ? 'el-icon-minus' : 'el-icon-plus']"></i> -->
                    <span class="title">{{ item.title }}</span>
                </template>
                <RT-Menu
                    :menuData="item.children"
                    v-if="item.children && item.children.length"
                    :menuActive="menuActive"
                ></RT-Menu>
            </el-submenu>
            <router-link :to="item.path" v-else :key="item.path">
                <el-menu-item :index="item.activeIndex">
                    <!-- <i :class="[menuActive === item.activeIndex ? 'el-icon-minus' : 'el-icon-plus']"></i> -->
                    <span class="title">{{ item.title }}</span>
                </el-menu-item>
            </router-link>
        </template>
    </div>
</template>
<script>
export default {
    name: 'RT-Menu',
    props: {
        menuData: {
            type: Array,
            default: () => [],
        },
        menuActive: {
            type: String,
            default: '0-0-1',
        },
    },
};
</script>
<style lang="less" scoped>
.menuItem-content{
    background: #e8e8e8;
}
</style>
